<template>

	<view class="page">
		<u-navbar :bgColor="bgColor" :fixed="false" title="新增随访模板" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="itema">
			<view class="sfdx">随访计划名称</view>
			<u--input placeholder="请输入随访计划名称" border="surround" v-model="value" @change="change"></u--input>
			<view class="redjy">*名称建议后缀增加“随访计划”</view>
			<view class="sfdx">适用疾病</view>
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>

			<view class="sfdx">病症描述</view>
			<u--input placeholder="请输入病症描述" border="surround" v-model="value" @change="change"></u--input>

			<view class="sfdx">基准时间</view>
			<u--input placeholder="请输入" border="surround" v-model="value" @change="change"></u--input>

			<view class="row_a_c" style="margin-top: 80rpx;">
				<view class="xxx"></view>
				<view class="stitle">随访计划详情</view>
			</view>

			<view class="row_a_c" style="margin-top: 24rpx;">
				<image class="oneaaa" src="/static/images/one.png"></image>
				<view class="oname">第一次随访任务</view>
			</view>

			<view class="numjh">
				<uni-data-select placeholder="请选择随访时间" v-model="value" :localdata="range" @change="change"></uni-data-select>

				<view class="txsra">
					<view class="row_a_c space-between">
						<view class="txa">复查提醒</view>
						<image class="tss" src="/static/images/tss.png"></image>
					</view>
					<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
				</view>

				<view class="jxmaab row_a_c center">
					<image class="jxm" src="/static/images/jxm.png"></image>
					<view class="tnamea">添加项目</view>
				</view>

			</view>



		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				range: [
					{ value: 0, text: "篮球" },
					{ value: 1, text: "足球" },
					{ value: 2, text: "游泳" },
				],
				bgColor: 'rgba(0, 31, 63, 0)',
			};
		},
		methods: {
			toUrl(url) {
				this.navTo(url);
			},
		},
	};
</script>
<style scoped lang="scss">
	.itema {
		width: 690rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 16rpx;
		margin-left: 30rpx;
	}

	.sfdx {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 32rpx;
		margin-top: 50rpx;
	}

	::v-deep .u-border {
		height: 76rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border-width: 0rpx !important;
	}

	.redjy {
		font-weight: 400;
		font-size: 20rpx;
		color: #FF0000;
		margin-top: 16rpx;
	}


	::v-deep .uni-select {
		background: #FAFAFA;
		font-size: 28rpx;
		border: 0px solid #e5e5e5;
		border-bottom: solid 0px #e5e5e5;
		height: 76rpx;
	}

	.xxx {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.stitle {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.oneaaa {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.oname {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.numjh {
		// background: rebeccapurple;
		width: 620rpx;
		margin-left: 70rpx;
		padding-top: 34rpx;
	}

	.txa {

		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);

	}

	.tss {
		width: 32rpx;
		height: 32rpx;
	}

	.txsra {
		width: 620rpx;
		height: 196rpx;
		background: #FAFAFA;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 16rpx;
		padding: 32rpx;
	}

	::v-deep .u-textarea {
		margin-top: 24rpx;
		background-color: #FAFAFA !important;
		padding: 0px !important;
	}

	.jxmaab {
		width: 192rpx;
		height: 48rpx;
		background: rgba(39, 204, 187, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 16rpx;
	}

	.jxm {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.tnamea {
		font-weight: 400;
		font-size: 24rpx;
		color: #27CCBB;
	}
</style>